<template>
  <div class="main-box">
    <div class="wrap" :class="`var-elevation--3`">
      <div class="temp-box">
        <div class="temp">{{ $store.state.now.temp }}°</div>
        <div class="icons">
          <img
            :src="
              'https://a.hecdn.net/img/common/icon/202106d/' +
              $store.state.now.icon +
              '.png'
            "
            referrerpolicy="no-referrer"
          />
        </div>
      </div>
      <div class="text-box">
        <div class="location">
          <div class="location-adm">
            <span v-if="$store.state.city != $store.state.location.adm1">
              {{ $store.state.location.adm1 }}
            </span>
            <span v-if="$store.state.city != $store.state.location.adm2">
              · {{ $store.state.location.adm2 }}
            </span>
          </div>
        </div>
        <div class="text">
          <div class="city">{{ $store.state.city }}</div>
          <div class="weather">{{ $store.state.now.text }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useStore } from 'vuex'

const store = useStore()

// 自动定位请求数据
if (store.state.city.length < 1) {
  store.state.loadingTip = true
  store.dispatch('getAutoIP')
  setTimeout(() => {
    store.state.loadingTip = false
  }, 1500)
}
</script>

<style lang="less" scoped>
.wrap {
  display: flex;
  flex-direction: column;
  margin-top: 20px;

  background: rgba(204, 204, 204, 0.305);
  width: 100%;
  height: 184px;
  border-radius: 20px 150px 20px 20px;
  color: #fff;

  .temp-box {
    flex: 3;
    display: flex;

    .temp {
      flex: 1;
      margin-left: 25px;
      display: flex;
      align-items: center;
      text-align: left;

      font-size: 100px;
      font-weight: 500;
      color: #141a19;
    }
    .icons {
      flex: 1;
      text-align: right;

      img {
        opacity: 0.7;
        width: 115px;
        height: 115px;
      }
    }
  }

  .text-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 15px;
    font-family: FZQiTi-S14S;

    .location {
      flex: 1;
      .location-adm {
        padding-left: 25px;
        font-weight: 300;
        font-style: italic;
        font-size: 16px;
        color: #141a19b7;
      }
    }

    .text {
      flex: 1;
      display: flex;
      font-size: 28px;
      color: #141a19;
      font-style: italic;
      font-weight: 500;
      .city {
        flex: 1;
        padding-left: 25px;
      }
      .weather {
        flex: 1;
        text-align: right;
        padding-right: 25px;
      }
    }
  }
}
</style>
